/*
  学习目标：了解Context使用场景和优缺点
  缺点:
    1. 语法复杂
    2. 增加组件的嵌套结构, 调试困难
  优点:
    1. React自带, 无需下包, 减少包体积

  场景:🔔
    1. 多语言
    2. 一键换色
*/

import React, { Component } from 'react';

const { Provider, Consumer } = React.createContext();
const { Provider: Provider2, Consumer: Consumer2 } = React.createContext();

export default class App extends Component {
  render() {
    return (
      <div>
        <h1>父组件</h1>
        <Provider value={[1, 2, 3]}>
          <Son></Son>
        </Provider>
      </div>
    );
  }
}

class Son extends Component {
  render() {
    return (
      <div>
        <h2> 儿子</h2>
        <Provider2 value="hello 78">
          <SonSon></SonSon>
        </Provider2>
      </div>
    );
  }
}

class SonSon extends Component {
  render() {
    return (
      <div>
        <h2> 孙子</h2>
        <SonSonSon></SonSonSon>
        <Consumer>
          {/* // 3. 使用Consumer组件接收数据 */}
          {(data) => <h1>{data}</h1>}
        </Consumer>
      </div>
    );
  }
}

class SonSonSon extends React.Component {
  render() {
    return (
      <div>
        <h3>SonSonSon</h3>
        <Consumer2>{(data) => <i>{data}</i>}</Consumer2>
      </div>
    );
  }
}
